import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_demo/widget/buttons.dart';
import 'package:flutter_demo/widget/tiny_widgets.dart';
import 'package:universal_html/html.dart' as html;

class ChoosePictureView extends StatefulWidget {

  final Function(html.File file)? callback;

  ChoosePictureView(
      {Key? key,
        this.callback
      }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _ChoosePictureViewState();
}

class _ChoosePictureViewState extends State<ChoosePictureView> {

  html.File? file;
  Uint8List? fileBytes;
  late html.FileUploadInputElement uploadInput;

  @override
  void initState() {
    super.initState();
    uploadInput = html.FileUploadInputElement();
    uploadInput.multiple = false;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 148,
          height: 148,
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black26, width: 1),
            borderRadius: BorderRadius.circular(5),
          ),
          child: fileBytes == null
          ? Icon(
            Icons.add,
            size: 28,
            color: Colors.black45,
          )
          : Image.memory(
            fileBytes!,
            fit: BoxFit.cover,
          ),
        ),
        C(16),
        BaseButton(
          radius: 5,
          width: 148,
          height: 40,
          withShadow: false,
          centerButton: false,
          onTap: () => pickFile(),
          child: const Text(
            '点击选择文件上传',
            style: TextStyle(
              fontSize: 14,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }

  void pickFile() {
    uploadInput.click();
    uploadInput.onChange.listen((event) async {
      file = uploadInput.files?.first;
      if (file != null) {
        final reader = html.FileReader();
        reader.readAsArrayBuffer(file!);
        await reader.onLoad.first;
        setState(() {
          fileBytes = reader.result as Uint8List;
          widget.callback?.call(file!);
        });
      }
    });
  }
}

class ChooseFileView extends StatefulWidget {

  final String title;
  final Function(html.File file)? callback;

  ChooseFileView(
      {Key? key,
        required this.title,
        this.callback
      }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _ChooseFileViewState();
}

class _ChooseFileViewState extends State<ChooseFileView> {

  html.File? file;
  late html.FileUploadInputElement uploadInput;

  @override
  void initState() {
    super.initState();
    uploadInput = html.FileUploadInputElement();
    uploadInput.multiple = false;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 148,
          height: 50,
          padding: const EdgeInsets.all(8),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black26, width: 1),
            borderRadius: BorderRadius.circular(5),
          ),
          child: file == null
          ? Text(
            widget.title,
            style: TextStyle(
              color: Color(0xff606266),
              fontSize: 14,
            ),
          )
          : Text(
            file!.name,
            style: TextStyle(
              color: Color(0xff606266),
              fontSize: 14,
            ),
          ),
        ),
        C(16),
        BaseButton(
          radius: 5,
          width: 148,
          height: 40,
          withShadow: false,
          centerButton: false,
          onTap: () => pickFile(),
          child: const Text(
            '点击选择文件上传',
            style: TextStyle(
              fontSize: 14,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }

  void pickFile() {
    uploadInput.click();
    uploadInput.onChange.listen((event) async {
      file = uploadInput.files?.first;
      if (file != null) {
        setState(() {
          widget.callback?.call(file!);
        });
      }
    });
  }
}